import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { DataTransmissionService } from '../../services/data-transmission.service'
import { ModelContainerService } from '../../services/model-container.service'
import { OlMapService } from '../../services/ol-map.service'
import {WindowEventService} from '../../services/window.event.service'
import proj4 from 'proj4'
import VectorLayer from 'ol/layer/vector'
import Vector from 'ol/source/vector'
import GeoJSON from 'ol/format/GeoJSON'
import Proj from 'ol/proj'
import BingMaps from 'ol/source/bingmaps'
import Map from 'ol/map'
import View from 'ol/view'
import TileLayer from 'ol/layer/tile'
import XYZ from 'ol/source/xyz'
import OSM from 'ol/source/osm'
import Extent from 'ol/extent'
@Component({
  selector: 'app-ol-map',
  templateUrl: './ol-map.component.html',
  styleUrls: ['./ol-map.component.css'],
  providers: [OlMapService]
})



export class OlMapComponent implements OnInit {
  private MapObject;
  private ButtonText: string;
  private Layers: Array<any> = [];
  private MapHeight:number;

  private styles = [
    'Road',
    'RoadOnDemand',
    'Aerial',
    'AerialWithLabels',
    'collinsBart',
    'ordnanceSurvey'
  ];
  vectorLayer;
  private LayerOne = new TileLayer({
    source: new OSM()
  });

  private BingLayer = new TileLayer({
    preload: Infinity,
    source: new BingMaps({
      key: 'AjJc6AsekcsRocEYk3NhrXNYcAZaD9owLDe7pWr_lI0rT3lmdz0i3WQe7zIO3OcT',
      imagerySet: this.styles[2]
    })
  })

  constructor(private modelContainerService: ModelContainerService,
    private dataTransmissionService: DataTransmissionService,
    private olMapService: OlMapService,
  private windowEventService:WindowEventService) {

  }

  initMap() {
     this.Layers.push(this.BingLayer);
     //this.Layers.push(this.LayerOne);
    this.MapObject = new Map({
      target: 'mapview',
      layers: this.Layers,
      view: new View({
        center: [0, 0],
        zoom: 2,
        minZoom: 2
      })
    });
    this.Layers.pop();
    // this.MapObject.addLayer(this.BingLayer);
    //this.MapObject.addLayer(this.LayerOne)
    Proj.setProj4(proj4);
  }

  ngOnInit() {
    this.initMap();
    this.MapHeight = window.outerHeight;
    
    this.windowEventService.getWindowResizeSubject().subscribe(next=>{
      this.MapHeight = next.outerHeight-20;
    })

  

    
     
    //订阅geoJson,添加到图层
    this.dataTransmissionService.getGeoJson().subscribe(next => {
      this.olMapService.addVectorLayer(this.MapObject, next);
    }, error => {
      console.log(error);
    })

    // 图层的删除
    this.dataTransmissionService.getDeleteLayerSubject().subscribe(layerId=>{
        this.olMapService.removeLayer(this.MapObject,layerId);
    })

    //订阅是否显示或者隐藏图层
    this.dataTransmissionService.getLayerId().subscribe(next => {
      this.olMapService.showOrHideLayer(this.MapObject,next);
    },error=>{
      console.log(error);
    })

  }

  getData() {
    let dataid = 'gd_2ef5cbe0-bd60-11e7-8357-292d9d08c8e3';

    this.modelContainerService.getGeoJson(dataid).then(data => {

      //this.olMapService.addVectorLayer(this.MapObject,'dsa',data);
    }).catch(reason => {
      console.log(reason);
    })
  }




}
